<template>
  <div class="w-[48%] h-24 overflow-hidden rounded-sm">
    <img :src="data.image.url" alt="" class="w-full h-[45%]" />
    <div class="py-0.5 text-[13px] text-gray-500">
      <van-icon name="location-o" />
      <span class="ml-0.5">{{ data.location }}</span>
    </div>
    <div class="px-0.5 overflow-hidden text-ellipsis line-clamp-2">
      {{ data.houseName }}
    </div>
    <div class="px-0.5 text-[13px] text-gray-600">
      {{ data.summaryText }}
    </div>
    <div class="px-0.5">
      <span class="text-yellow-500"> {{ '¥' + data.finalPrice }} </span>
      <span class="text-[12px] relative top-[-1px] ml-0.5 line-through">{{
        '¥' + data.productPrice
      }}</span>
      <span
        class="ml-0.5 rounded-sm text-[13px] bg-red-400 text-white px-0.5"
        >{{ '已减¥' + discount }}</span
      >
    </div>
  </div>
</template>
<script setup>
import { computed } from 'vue'

const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  }
})
const discount = computed(() => {
  return props.data.productPrice - props.data.finalPrice
})
</script>
<style lang="scss" scoped></style>
